<html>
<title>用户管理</title>
<head>
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <script>
        window.onload = function () {
            var app = new Vue({
                el: '.container',
                data: {
                    users: [
                        { name: "tom", age: 10, email: "tom@example.com" },
                        { name: "jerry", age: 13, email: "jerry@example.com" },
                        { name: "lily", age: 18, email: "lily@example.com" }
                    ],
                    user: {},
                    nowIndex: -1
                },
                methods: {
                    addUser: function () {
                        this.users.push(this.user);
                        this.user = {}
                    },
                    deleteUser: function () {
                        if (this.nowIndex === -1) {
                            this.users = [];
                        } else {
                            this.users.splice(this.nowIndex, 1);
                        }

                    },
                    resetUser: function () {
                        this.user = {}
                    }
                }
            })
        }

    </script>
</head>

<body>
    <div class="container">
        <h2 class="text-center">添加用户</h2>
        <form class="form-horizontal">
            <div class="div-form-group">
                <label for="name" class="control-lable col-sm-2 col-sm-offset-2"> 姓名：</label>
                <div class="col-sm-6  text-center">
                    <input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名">
                </div>
            </div>
            <div class="div-form-group">
                <label for="age" class="control-lable col-sm-2 col-sm-offset-2"> 年龄：</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">
                </div>
            </div>
            <div class="div-form-group">
                <label for="email" class="control-lable col-sm-2 col-sm-offset-2"> 邮箱：</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱">
                </div>
            </div>
            <div class="div-form-group">
                <label for="email" class="control-lable col-sm-2 col-sm-offset-2"></label>
                <div class="col-sm-6 text-right">
                    <input type="button" value="添加" class="btn btn-primary" v-on:click="addUser">
                    <input type="reset" value="重置" class="btn btn-primary " v-on:click="resetUser">
                </div>
            </div>
        </form>
        <table class="table table-bordered table-hover">
            <caption class="h3 text-center text-info">用户列表</caption>
            <thead>
                <tr>
                    <th class="text-center">序号</th>
                    <th class="text-center">姓名</th>
                    <th class="text-center">年龄</th>
                    <th class="text-center">邮箱</th>
                    <th class="text-center">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(user,index) in users">
                    <td class="text-center">{{index + 1}}</td>
                    <td class="text-center">{{user.name}}</td>
                    <td class="text-center">{{user.age}}</td>
                    <td class="text-center">{{user.email}}</td>
                    <td class="text-left">
                        <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del"
                            @click="nowIndex=index">删除</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" style="text-align: left;">
                    </td>
                    <td style="text-align: left;">
                        <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del"
                            @click="nowIndex=-1">删除全部</button>
                    </td>
                </tr>

            </tbody>
        </table>

        <div class="modal" id="del">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-miss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-type" v-show="nowIndex!==-1">确实要删除用户:
                            {{users[nowIndex]?this.users[nowIndex].name:''}}吗？</h4>
                        <h4 class="modal-type" v-show="nowIndex===-1">确实要删除所有用户吗？</h4>
                    </div>
                    <div class="modal-body text-center">
                        <button class="btn btn-primary" data-dismiss="modal">取消</button>
                        <button class="btn btn-primary" data-dismiss="modal" v-on:click="deleteUser">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>